<script setup name="ui-navbar" lang="ts">
import { defineProps, onMounted, watch } from 'vue'
import navbar from './navbar.vue'

const props = defineProps({
  fixed: {
    type: Boolean,
    default: false,
  },
  opacity: {
    type: Boolean,
    default: false,
  },
  ui: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  navStyle: {
    type: String,
    default: '',
  },
  navBgColor: {
    type: String,
    default: '',
  },
})
const { _initPageScroll } = useSysMixin()
const opacityVal = ref(0)
onMounted(() => {
  _initPageScroll((e) => {
    const scrollTop = e.scrollTop
    opacityVal.value = scrollTop > 100 ? 1 : scrollTop * 0.01
  })
})

const { _backPage, sysIsFirstPage } = useSysMixin()

const computedStyle = computed(() => {
  return props.opacity
    ? `background-color: ${addAlpha(props.navBgColor, opacityVal.value)};`
    : props.navStyle
})
function addAlpha(color: string, opacity: number) {
  if (opacity === 0) {
    return `${color}00` // 当opacity为0时，输出00
  }
  const _opacity = Math.round(Math.min(Math.max(opacity || 0.01, 0), 1) * 255)
  return color + _opacity.toString(16).toUpperCase()
}

watch(computedStyle, (newValue, oldValue) => {})
function goBack() {
  _backPage()
}
</script>

<template>
  <nut-navbar
    title="TITLE" :safe-area-inset-top="true"
    :placeholder="true"
    :fixed="true"
  >
    <template #left>
      <view class="flex items-center">
        <nut-icon name="left" />
        <text>Back</text>
      </view>
    </template>
  </nut-navbar>
  <!-- <wd-navbar
    :fixed="fixed"
    :placeholder="fixed"
    :custom-style="computedStyle"
    :z-index="100"
    safe-area-inset-top
    :bordered="false"
    @click-left="goBack"
  >
    <template #title>
      <div class="text-32rpx font-medium" :style="{ color }">
        {{ title }}
      </div>
    </template>
    <template #left>
      <wd-icon v-if="sysIsFirstPage" name="home" size="18px" :color="color" />
      <wd-icon v-else name="thin-arrow-left" size="16px" :color="color" />
    </template>
  </wd-navbar> -->
</template>

<style lang="scss" scoped></style>
